<template>
    <div>
      <div class="card card-custom gutter-b example example-compact" id="tableBody">
        <div class="card-header">
          <div class="card-title">
            <span class="card-icon">                           
              <span class="svg-icon svg-icon-primary svg-icon-2x">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <polygon points="0 0 24 0 24 24 0 24"/>
                        <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,
                        8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,
                        4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                        <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,
                        15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,
                        21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                    </g>
                </svg>
              </span>
            </span>
            <h3 class="card-label"> 在线用户列表 </h3>
          </div>
          <div class="card-toolbar">
            <div class="example-tools justify-content-center">    
              <button class="btn btn-link" @click="resetAll()">
                  <b-spinner type="grow" small></b-spinner><strong>刷 新</strong>
              </button>    
            </div>
          </div>
        </div>
        <!--分页组件-->
        <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row :data="accountOnlineDataList" >
          <template slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </template>
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              {{scope.$index+1}} 
            </template>
          </el-table-column>
          <el-table-column align="center" show-overflow-tooltip prop="oauthAccountEntity.type"  label="#" min-width="120">
            <template slot-scope="scope">
              <div class="symbol symbol-120 symbol-circle symbol-xl-60">
                <div class="symbol-label" :style="{
                    backgroundImage: scope.row.oauthAccountEntity.smallPic
                      ? `url(${scope.row.oauthAccountEntity.smallPic})`
                      : `url(${defaultSmall})`,
                  }">
                </div>
                <i class="symbol-badge symbol-badge-bottom bg-success"></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="oauthAccountEntity.account" label="账号" min-width="100"></el-table-column>
          <el-table-column align="center" prop="oauthAccountEntity.name" show-overflow-tooltip  label="姓名" min-width="100">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <div class="symbol symbol-60 symbol-circle symbol-xl-60">
                  <div class="symbol-label" :style="{
                      backgroundImage: scope.row.oauthAccountEntity.smallPic
                        ? `url(${scope.row.oauthAccountEntity.smallPic})`
                        : `url(${defaultSmall})`,
                    }">
                  </div>
                  <i class="symbol-badge symbol-badge-bottom bg-success"></i>
                </div>
                <p>姓名: {{ scope.row.oauthAccountEntity.name }}</p>
                <p>账号: {{ scope.row.oauthAccountEntity.account }}</p>
                <p>邮箱: {{ scope.row.oauthAccountEntity.email }}</p>
                <p>手机号: {{ scope.row.oauthAccountEntity.phone }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.oauthAccountEntity.name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="oauthAccountEntity.lastLoginTime"  label="最后一次登录日期" min-width="160"></el-table-column>
          <el-table-column align="center" prop="sessionExpire" :formatter="formateDhms" label="失效期" min-width="160"></el-table-column>
          <el-table-column align="left" label="操作" fixed="left" min-width="80">
            <template slot-scope="scope">
              <!--scope.row当前行的对象-->              
              <button @click="removeAccount(scope.row)" 
              v-permission="{ action: '/oauthOnline/delete', effect: 'display' }"
              class="btn btn-link" title="剔除">剔除</button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            hide-on-single-page   
            @size-change="handleSizeChange"        
            @current-change="handleCurrentChange"  
            :current-page="pageNo"                
            :page-sizes="[1,5, 10, 30, 50]"          
            :page-size="pageSize"			  
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="totalCount">		
          </el-pagination>
        </div>
      </div>
  </div> 
</template>
  
<script>
  import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
  import Swal from "sweetalert2";
  import apiUtil from "@/core/util/apiUtil.js"; 
  import { handleNotify,handleAlert,handleConfirm,showWating,closeWating} from "@/core/util/jehcUtil.js";
  export default {
    data(){
      return{
        defaultSmall:"media/users/default.jpg",
        searchForm:{keywords: ""},
        accountOnlineDataList:[],
        sels: [], //当前选框选中的值
        pageNo:1,      // 默认当前是第一页
        pageSize:5,    // 当前每页的数据是5条
        totalCount:0   // 总数默认为0
      }
    },
    components: {
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "在线用户" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods:{
      initList(){
        showWating({renderBody:"tableBody"});
        var params = {};
        params.usePageNo = true;//采用第几页进行分页（兼容）
        params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
        params.pageNo = this.pageNo;//开始的记录序号   
        params.searchJson = JSON.stringify(this.searchForm);//为form元素     
        apiUtil.queryPage(process.env.VUE_APP_OAUTH_API+"/oauthOnline/list", params).then(({ data }) => {
          this.accountOnlineDataList = data.data;//给结果集赋值
          this.totalCount = data.total;// 获取当前数据的总数    
        });
      },    
      handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
        this.pageSize = val;  // 修改页的大小
        this.initList();       // 按新的pageNo和pageSize进行查询
      },
      handleCurrentChange(val) { // 修改当前页所触发的函数
        this.pageNo = val;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      handleSelectionChange(sels) {//获取选中的值
        this.sels = sels;
      },
      search(){
        this.pageNo = 1;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      resetAll(){
        Object.assign(this.$data.searchForm, this.$options.data().searchForm);
        this.search();
      },
      removeAccount(row){
        let id = row.oauthAccountEntity.id;
        let account = row.oauthAccountEntity.account;
        let name =  row.oauthAccountEntity.name;
        this.$confirm('确定要剔除姓名：'+name+'，登录账户：'+account+'？', "提示", {type: "warning",}).then(() => {
          var params = {};
          apiUtil.delete(process.env.VUE_APP_OAUTH_API+'/oauthOnline/delete/'+id,params).then(data=>{
            if(data.data.success){
              handleAlert("剔除成功", "success", 3);
              this.search();
            }else {
              handleAlert("剔除失败", "error", 3);
            }
          });
        }).catch(()=>{});//注意这里，这里是重点！！！;
      },        
      formateDhms(row){
          let timestamp = row.sessionExpire;
          if (timestamp) {
            if(timestamp == -1 || timestamp == -2){
              return "永久"
            }
              var result = '';
              if (timestamp >= 86400) {
                  var days = Math.floor(timestamp / 86400);
                  timestamp = timestamp % 86400;
                  result = days  + ' 天';
                  if (timestamp > 0) {
                      result += ' ';
                  }
              }
              if (timestamp >= 3600) {
                  var hours = Math.floor(timestamp / 3600);
                  timestamp = timestamp % 3600;
                  result += hours + ' 小时';
                  if (timestamp > 0) {
                      result += ' ';
                  }
              }
              if (timestamp >= 60) {
                  var minutes = Math.floor(timestamp / 60);
                  timestamp = timestamp % 60;
                  result += minutes + ' 分钟';
                  if (timestamp > 0) {
                      result += ' ';
                  }
              }
              result += parseInt(timestamp) + ' 秒';
              return result;
          }
          return "";
      },
    }
  };
</script>